<template>
    <div>
        <!-- 当前没有谱记录信息 -->
        <div v-if="show_record">
            <div class="prompt">客官，还没有任何记录哟T_T</div>
        </div>
        <!-- 当前有记录信息 -->
        <div v-else>
            <div class="th">
                <div class="date">时间</div>
                <div class="busi">分数</div>
                <div class="mark">最后得分</div>
                <div class="note">备注</div>
            </div>
            <RecordList v-for="(record, index) in records" :key="index" :record="record"></RecordList>
            <p class="text-footer" v-if="!more">客官，底部已经空了 T_T</p>
            <p class="text-footer" v-else>努力加载中 ···</p>
        </div>
    </div>
</template>

<script>
import { get } from '../../util'
import RecordList from '../../components/RecordList'
export default {
  // 声明组件
  components: {
    RecordList
  },
  data () {
    return {
      userinfo: {},
      show_record: false,
      records: [],
      page: 0,
      more: true
    }
  },
  methods: {
    // 获取用户记录
    async getRecords (init) {
      // 加载中提示框
      wx.showToast({
        title: '努力加载中 ···',
        icon: 'loading'
      })
      // 重置页面
      if (init) {
        this.page = 0
        this.more = true
      }
      // 防止记录重复拼接
      if (this.page === 0) {
        this.records = []
      }
      try {
        const data = {
          openid: this.userinfo.openId,
          page: this.page
        }
        // 向后端传递用户信息
        const res = await get('/weapp/getrecords', data)
        console.log(res)
        // 将后端传递的records拼接赋值给records(每一次获取的记录都需要拼接到当前记录后面)
        this.records = this.records.concat(res.records)
        if (res.records.length < 15 && this.page > 0) {
          // 最后一页
          this.more = false
        }
        if (this.records.length === 0) {
          this.show_record = true
        } else {
          this.show_record = false
        }
        // 隐藏加载
        wx.hideToast()
      } catch (e) {
        wx.hideToast()
        console.log(e)
      }
    }
  },
  onReachBottom () {
    // 没有记录则停止执行
    if (!this.more) {
      return
    }
    this.page = this.page + 1
    this.getRecords()
  },
  // 每次切换到记录页面都会从缓存中调取用户信息
  onShow () {
    const userinfo = wx.getStorageSync('userinfo')
    // 有用户信息则将信息保存在userinfo里
    if (userinfo.openId) {
      this.userinfo = userinfo
      console.log(this.userinfo)
      this.getRecords(true)
    }
  },
  // 设置下拉
  onPullDownRefresh () {
    this.getRecords(true)
    wx.stopPullDownRefresh()
  },
  // 设置转发
  onShareAppMessage () {
    return {
      title: `神器在手，自律我有！
                    想自律，我推荐自律君~`,
      path: '/pages/record/main'
    }
  }
}
</script>

<style scoped>
    .prompt {
        margin-top: 50px;
        margin-bottom: 30px;
        font-size: 16px;
        color: #888888;
        text-align: center;
    }

    .th {
        width: 100%;
        height: 30px;
        line-height: 30px;
        background: #ea5149;
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
        display: flex;
    }
    .date {
        width: 23%;
        padding-left: 60px;
    }
    .busi {
        width: 10%;
        margin-left: 5px;
    }
    .mark {
        width: 20%;
        margin-left: 20px;
    }
    .note {
        width: 20%;
        margin-left: 20px;
    }
    .text-footer {
        text-align: center;
        font-size: 14px;
        margin-bottom: 5px;
        padding-top: 5px;
        color: #c0c0c0;
    }
</style>